<template>
  <div class="app-container home">
    <!-- 指标数据区域 -->
    <el-row :gutter="15" class="mb20">
      <el-col :span="24">
        <div class="statistic-title">指标数据</div>
      </el-col>
    </el-row>
    
    <el-row :gutter="15" class="mb20">
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card class="statistic-card">
          <div class="statistic-item">
            <div class="statistic-icon bg-primary">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">1,234</div>
              <div class="statistic-label">下单量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card class="statistic-card">
          <div class="statistic-item">
            <div class="statistic-icon bg-success">
              <i class="el-icon-s-management"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">567</div>
              <div class="statistic-label">测试量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card class="statistic-card">
          <div class="statistic-item">
            <div class="statistic-icon bg-warning">
              <i class="el-icon-collection"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">89</div>
              <div class="statistic-label">测试类型</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card class="statistic-card">
          <div class="statistic-item">
            <div class="statistic-icon bg-info">
              <i class="el-icon-chat-line-round"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">1,890</div>
              <div class="statistic-label">帖子量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 历史数据区域 -->
    <el-row :gutter="15" class="mb20">
      <el-col :span="24">
        <div class="statistic-title">近7天历史数据</div>
      </el-col>
    </el-row>
    
    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="history-card">
          <div slot="header" class="clearfix">
            <span>数据趋势</span>
          </div>
          <div class="history-chart">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="chart-item">
                  <div class="chart-title">下单量趋势</div>
                  <div class="chart-placeholder">
                    <i class="el-icon-s-order chart-icon"></i>
                    <p>下单量图表</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="chart-item">
                  <div class="chart-title">测试量趋势</div>
                  <div class="chart-placeholder">
                    <i class="el-icon-s-management chart-icon"></i>
                    <p>测试量图表</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="chart-item">
                  <div class="chart-title">帖子量趋势</div>
                  <div class="chart-placeholder">
                    <i class="el-icon-chat-line-round chart-icon"></i>
                    <p>帖子量图表</p>
                  </div>
                </div>
              </el-col>
            </el-row>
            
            <el-row :gutter="20" class="mt20">
              <el-col :span="24">
                <div class="data-table">
                  <div class="table-title">详细数据</div>
                  <el-table :data="historyData" style="width: 100%" border>
                    <el-table-column prop="date" label="日期" width="120"></el-table-column>
                    <el-table-column prop="orders" label="下单量"></el-table-column>
                    <el-table-column prop="tests" label="测试量"></el-table-column>
                    <el-table-column prop="posts" label="帖子量"></el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 历史数据
      historyData: [
        { date: '2025-05-22', orders: 120, tests: 45, posts: 89 },
        { date: '2025-05-21', orders: 98, tests: 56, posts: 78 },
        { date: '2025-05-20', orders: 156, tests: 67, posts: 92 },
        { date: '2025-05-19', orders: 89, tests: 34, posts: 65 },
        { date: '2025-05-18', orders: 210, tests: 78, posts: 120 },
        { date: '2025-05-17', orders: 134, tests: 56, posts: 98 },
        { date: '2025-05-16', orders: 112, tests: 67, posts: 85 }
      ]
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank")
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  background-color: #f5f7fa;
  padding: 20px;
  
  .mb20 {
    margin-bottom: 20px;
  }
  
  .mt20 {
    margin-top: 20px;
  }
  
  .statistic-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #409EFF;
  }
  
  .statistic-card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    }
    
    .statistic-item {
      display: flex;
      align-items: center;
      
      .statistic-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        
        i {
          font-size: 24px;
          color: #fff;
        }
        
        &.bg-primary {
          background: linear-gradient(45deg, #409EFF, #64b5f6);
        }
        
        &.bg-success {
          background: linear-gradient(45deg, #67C23A, #85ce61);
        }
        
        &.bg-warning {
          background: linear-gradient(45deg, #E6A23C, #ebb563);
        }
        
        &.bg-info {
          background: linear-gradient(45deg, #909399, #a6a9ad);
        }
      }
      
      .statistic-info {
        .statistic-value {
          font-size: 24px;
          font-weight: bold;
          color: #333;
          margin-bottom: 5px;
        }
        
        .statistic-label {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
  
  .history-card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .chart-item {
      text-align: center;
      
      .chart-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
      }
      
      .chart-placeholder {
        height: 150px;
        background: #f8f9fa;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        .chart-icon {
          font-size: 40px;
          color: #c0c4cc;
          margin-bottom: 10px;
        }
        
        p {
          color: #999;
          margin: 0;
        }
      }
    }
    
    .data-table {
      .table-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
      }
    }
  }
}
</style>

